<template>
  <div>
    <div>
      <el-input
        placeholder="请输入内容"
        v-model="inpunt"
        class="elinput"
        clearable
        @change="select()"
      >
      </el-input>

      <el-button type="primary" @click="select()" class="elinput_btn"
        >查询</el-button
      >
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </div>

    <!-- --------------------------------------------------------------------------------------- -->
    <!-- 弹窗add增加 -->
    <el-dialog
      title="增加数据"
      :visible.sync="dialogVisible"
      width="30%"
      class="popup"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!--  :append-to-body='true' 解决蒙版问题 -->
      <!-- from 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片路径">
          <el-input v-model="form.imgs"></el-input>
        </el-form-item>
        <el-form-item label="名字">
          <el-input v-model="form.ename"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
    <el-col :span="11" >
      <el-date-picker type="date" placeholder="选择日期"  v-model="form.etime" style="width: 100%;" value-format="yyyy-MM-dd">></el-date-picker>
    </el-col>
  </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="form.etext"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.edz"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLB()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->

    <!-- 弹窗update修改 -->
    <el-dialog
      title="修改图片路径"
      :visible.sync="dialogVisible_up"
      width="30%"
      class="popup"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!-- from 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片路径">
          <el-input v-model="form.eimg_up"></el-input>
        </el-form-item>
        <el-form-item label="名字">
          <el-input v-model="form.ename_up"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
    <el-col :span="11" >
      <el-date-picker type="date" placeholder="选择日期"  v-model="form.etime_up" style="width: 100%;" value-format="yyyy-MM-dd">></el-date-picker>
    </el-col>
  </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="form.etext_up"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.edz_up"></el-input>
        </el-form-item>
      </el-form>


      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_up = false">取 消</el-button>
        <el-button type="primary" @click="updataLB_send()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->
    <!-- --------------------------------------------------------------------------------------- -->

    <template>
      <!--  -->
      <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
      <el-table :data="date.slice((currentPage - 1) * 5, currentPage * 5)" border size="50" style="width: 100%">
        <!-- sortable 是排序 -->
        <el-table-column prop="eid" label="#" width="200" sortable> </el-table-column>
        <!--  -->
        <el-table-column
          prop="eimg"
          label="图片路径"
          size="50"
          min-width="200"
          height="200"
        >
        </el-table-column>
        <el-table-column
          prop="ename"
          label="名字"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="etime"
          label="时间"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="etext"
          label="简介"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="edz"
          label="地址"
          size="50"
          min-width="200"
          height="200"
          sortable
        >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="updataLB(scope.row)"
              >编辑</el-button
            >

            <!-- 删除确定项 -->
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteLBsend()">
              <el-button slot="reference" type="danger" size="small" @click="deleteLB(scope.row)"
                >删除</el-button
              >
            </el-popconfirm>
            <!-- 删除确定项结束 -->
          </template>
        </el-table-column>
      </el-table>
    </template>
  <!-- 分页 -->
    <el-pagination
  background
  layout="prev, pager, next"
  :total="date.length" class="paging"   
  @current-change="handleCurrentChange"
  :page-size="currenttal"
  >
  
</el-pagination>


  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        imgs: "",
        ename:"",
        etime:"",
        etext:"",
        edz:"",
        
        eid_up: "",
        eimg_up: "",
        ename_up:"",
        etime_up:"",
        etext_up:"",
        edz_up:"",
      },
      deleterid:"",
      
      dialogVisible: false,
      dialogVisible_up: false,
      currentPage: 1,//当前页数
      currenttal:5,//一页多少条数据
      date: [], //刚进来查询
      inpunt: "", //搜索框
    };
  },
  methods: {
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加轮播
    addLB() {
      if (this.form.imgs===""||this.form.ename===""||this.form.etime===""||this.form.etext===""||this.form.edz==="") {
        alert("输入不能为空");
        return;
      }
      this.axios
        .get(`/find/exhibitionadd?eimg=${this.form.imgs}&ename=${this.form.ename}&etime=${this.form.etime}&etext=${this.form.etext}&edz=${this.form.edz}`)
        .then((res) => {
          this.selectUrl();
        });
      this.form.imgs = "";
       this.form.ename="";
       this.form.etime="",
        this.form.etext=""
        this.form.edz=""
      this.dialogVisible = false;
    },
    // 修改轮播
    updataLB(a) {
      this.dialogVisible_up = true;
      this.form.eid_up = a.eid;
      this.form.eimg_up = a.eimg;
      this.form.ename_up = a.ename;
      this.form.etime_up = a.etime;
      this.form.etext_up = a.etext;
      this.form.edz_up = a.edz;
      console.log(a);
    },
    // 修改发送
    updataLB_send() {
      this.axios
        .get(
          `/find/exhibitionupdate?eid=${this.form.eid_up}&eimg=${this.form.eimg_up}&ename=${this.form.ename_up}&etime=${this.form.etime_up}&etext=${this.form.etext_up}&edz=${this.form.edz_up}`
        )
        .then((res) => {
          this.selectUrl();
        });
      
      this.dialogVisible_up = false;
    },
    // 删除传参
    deleteLB(a){
      this.deleterid=a.eid
    },
    // 删除发送
    deleteLBsend(){
      this.axios.get(`/find/exhibitiondel?eid=${this.deleterid}`).then((res=>{
          this.selectUrl();
      }))
    },
    // 搜索
    select() {
      if (this.inpunt == "") {
        this.selectUrl();
      } else {
        this.axios
          .get(`/find/exhibitionSelect?rid=${this.inpunt}`)
          .then((res) => {
            this.date = res.data.data;
          });
      }
    },
    // 查看表单
    selectUrl() {
      this.axios.get("/find/exhibition").then((res) => {
        this.date = res.data.data;
        console.log(res);
      });
    },

    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$data.currentPage = val
    },



  },
  mounted: function () {
    this.selectUrl();
    console.log(this.date.length);
  },
};
</script>

<style scoped>
.elinput {
  width: auto;
}
.elinput_btn {
  margin-left: 10px;
  
}

.paging{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
